import { useState } from 'react';
import Husband from './components/Husband';
import Wife from './components/Wife';

export default function App() {
  // 1. 把money提升到父组件中
  const [money, setMoney] = useState(0);

  // 2. 把赚钱方法提升到父组件中
  const handleMakeMoney = () => {
    setMoney(money + 1000);
  };

  // 5.1 子传父-定义回调函数
  const handleCost = () => {
    setMoney(money - 2000);
  };
  return (
    <div>
      <h1 style={{ textAlign: 'center' }}>家庭存款：{money}</h1>
      <Husband
        // 3.1 父传子money
        money={money}
        // 4. 通过子传父，父传回调
        handleMakeMoney={handleMakeMoney}
      />
      <hr />
      <Wife
        // 5.2 父组件，传回调
        handleCost={handleCost}
      />
    </div>
  );
}
